<template>
  <div class="action-box">
    <div class="left-area">
      <input type="file" multiple ref="fileInput" style="display: none" @change="handleAddFile" />
      <button class="btn-small" @click="($refs.fileInput as HTMLInputElement).click()">
        <PaperClipIcon />
      </button>
      <button class="btn-small" @click="handleThemeChange">
        <MoonIcon />
      </button>
    </div>
    <div class="right-area">
      <button
        class="btn-small"
        @click="handleSend"
        :disabled="!state.editorText?.length"
        v-show="!state.isSending"
      >
        <PlayIcon />
      </button>
      <button class="btn-small" @click="handleStop" v-show="state.isSending">
        <StopIcon />
      </button>
    </div>
  </div>
</template>

<script setup lang="ts" name="DialogAction">
import PaperClipIcon from '@/components/icons/PaperClipIcon.vue'
import PlayIcon from '@/components/icons/PlayIcon.vue'
import StopIcon from '@/components/icons/StopIcon.vue'
import MoonIcon from '@/components/icons/MoonIcon.vue'
import useHandleFile from '@/hooks/handler/useHandleFile'
import { inject } from 'vue'
import type { LDConfigReactive, LDEvents, LDStateReactive } from '@/llmDialog/types'
import useHandleSend from '@/hooks/handler/useHandleSend'

// 状态
const state = inject('state') as LDStateReactive

// 配置
const config = inject('config') as LDConfigReactive

// 事件
const events = inject('events') as LDEvents
const { send, stop, theme, uploadFiles, deleteFile } = events

// 容器滚动
const { scrollToBottom, isAtBottom } = inject('scroll-context') as {
  scrollToBottom: () => void
  isAtBottom: () => boolean
}

// 文件处理
const { uploadFile: _uploadFile, uploadFiles: _uploadFiles } = useHandleFile(state, events)

// 处理添加文件
const handleAddFile = (e: Event) => {
  const files = (e.target as HTMLInputElement).files
  if (!files) return
  _uploadFiles(files)
}

// 发送处理
const { send: _send } = useHandleSend(state, events, { scrollToBottom, isAtBottom })

// 处理发送
const handleSend = () => {
  _send()
}

// 处理停止发送
const handleStop = () => {
  state.isSending = false
  // 触发停止发送事件
  stop()
}

// 处理主题切换
const handleThemeChange = () => {
  const oldTheme = config.theme
  const newTheme = oldTheme === 'light' ? 'dark' : 'light'
  config.theme = newTheme
  // 触发主题切换事件
  theme(newTheme, oldTheme)
}
</script>

<style scoped>
.action-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.left-area,
.right-area {
  display: flex;
  gap: 10px;
}
.btn-small {
  width: 36px;
  height: 36px;
  outline: none;
  border: none;
  background-color: var(--ld-color-btn);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.btn-small:hover {
  background-color: var(--ld-color-btn-hover);
}
.btn-small:disabled {
  filter: opacity(0.5);
  cursor: not-allowed;
}
</style>
